<template>
  <div class="firstVue">
    <div class="left">
      <ul>
        <li>
          <router-link to="/oneVue">oneVue</router-link>
        </li>
        <li>
          <router-link to="/twoVue">twoVue</router-link>
        </li>
        <li>
          <router-link to="/threeVue">threeVue</router-link>
        </li>
      </ul>
    </div>
    <div class="right">
      <keep-alive>
          <router-view></router-view>
        </keep-alive>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  activated(){
    console.log('first=====activated');
  },
  deactivated(){
    console.log('first=====deactivated');
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
.firstVue {
  display: flex;
  width: 100%;
  height: 100%;
  .left {
    width: 200px;
    background-color: lightcoral;
    height: 100%;
    ul{
      display: flex;
      flex-direction: column;
      list-style: none;
      li{
        margin: 40px 0;
      }
    }
  }
  .right {
    flex: 1;
    background-color: peru;
    height: 100%;
  }
}
</style>
